<style>
    .ly-animation-scroll{
        opacity: 0;
    }
</style>
<template>
    <div :class="{'ly-animation-scroll':delay}" :style="{'animation-duration':duration?(duration/1000+'s'):null,'-webkit-animation-duration':duration?(duration/1000+'s'):null}">
        <slot></slot>
    </div>
</template>
<script>
    Rap.define('', '', function () {
        return {
            name: 'ly-animate',
            props: {
                animate:{
                    defalut: 'bounce'
                },
                trigger: {
                    defalut: 0
                },
                duration:{
                    defalut: 0
                },
                delay:{
                    defalut: 0
                },
                scroll:Boolean
            }, watch: {
                trigger: function () {
                    this.triggerAnimate();
                }
            }, data: function () {
                return {
                     hasTrigger:false
                };
            }, created: function () {


            },mounted:function () {
                if(this.scroll){
                    var me=this;
                    var onScrollerListener=function () {
                        var y = me.$el.getBoundingClientRect().y-window.innerHeight;
                        if(me.hasTrigger&&y>me.$el.clientHeight+50){
                            me.hasTrigger=false;
                            me.$el.classList.remove('animated');
                            me.$el.classList.remove(me.animate);
                        }
                        if(y<0){
                            if( me.hasTrigger)return;
                            if(me.delay){
                                setTimeout(function () {
                                    me.triggerAnimate();
                                  me.hasTrigger=true;
                                },me.delay);
                            }else{
                                me.triggerAnimate();
                                me.hasTrigger=true;
                            }


                        }
                    };
                    this.onScrollerListener=onScrollerListener;
                    window.addEventListener('scroll',onScrollerListener);
                }

            }, destroyed: function () {
                if(this.scroll){
                    if(this.onScrollerListener){
                        window.removeEventListener('scroll',this.onScrollerListener);
                    }
                }
            }, methods: {
                triggerAnimate:function () {
                    var me=this;
                    if( me.$el.className.indexOf('animated')!=-1){
                        return;
                    }
                    me.$el.classList.add('animated');
                    me.$el.classList.add(me.animate);
                    var time=1000;
                    if(this.duration){
                        time=this.duration;
                    }
                    if(!this.scroll){
                        setTimeout(function () {
                            me.$el.classList.remove('animated');
                            me.$el.classList.remove(me.animate);
                        },time);
                    }

                }
            }
        }
    });
</script>


